<template>
  <div class="sys-login">
    <div class="login-area">
      <div class="login">
        <!--<img src="" alt="">-->
      <div class="form-group">
        <!--<el-form label-position="top" label-width="10px">-->
          <!--<el-form-item prop="name">-->
            <!--<el-input v-model="loginForm.name" type="text" placeholder="用户名" @blur="inputBlur('name',loginForm.name)"></el-input>-->
            <!--<p>{{loginForm.nameerror}}</p>-->
          <!--</el-form-item>-->
          <!--<el-form-item prop="pwd">-->
            <!--<el-input type="pwd" v-model="loginForm.pwd"  placeholder="密码" @blur="inputBlur('pwd',loginForm.pwd)" ></el-input>-->
            <!--<p>{{loginForm.pawerror}}</p>-->
          <!--</el-form-item>-->
          <!--&lt;!&ndash;<el-form-item prop="captcha" v-if="captcha" >&ndash;&gt;-->
              <!--&lt;!&ndash;<el-input v-model="loginForm.captcha" type="text" ></el-input>&ndash;&gt;-->
          <!--&lt;!&ndash;</el-form-item>&ndash;&gt;-->
          <!--<div class="subbutten">-->
            <!--<el-form-item>-->
              <!--<el-button plain @click="submitForm('loginForm')">登录</el-button>-->
            <!--</el-form-item>-->
          <!--</div>-->
        <!--</el-form>-->
        <input type="text" placeholder="用户名" v-model="loginForm.name" />
        <input type="password" placeholder="密码" v-model="loginForm.pwd"/>
        <div class="subbutten">
          <el-button plain @click="submitForm()">登录</el-button>
        </div>
      </div>
    </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      loginForm: {
        name: '',
        pwd: '',
        errormsg: ''
      }
    }
  },
  computed: {
    // captcha () {
    //   if (this.validate)
    //     this.loginRules.captcha[0]
    //   return this.validate
    // }
  },
  methods: {
    submitForm () {
      if (this.loginForm.name=== ''||this.loginForm.pwd === '') {
        this.$alert('用户名 pwd  not null', '标题名称', {
          confirmButtonText: '确定'
        })
      } else {
        this.$axios.get('http://www.a/user/login').then(
          req => {
            console.info(req.data)
            this.$store.state.user ={...req.data}
            console.info(this.$store.state.user.token)
            this.$router.push('/layout/0-0')
          }
        ).catch(
          error => console.info(error)
        )
      }
    }
  }
}
</script>

<style type="styleesheet/scss" lang="scss" scoped>
.sys-login{
  .login-area{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(96,98,102,0.1);
    background-size:100% 100%;
    animation: motion 10s infinite;
    @at-root {
      @keyframes motion {
        0% {
          background: url('../../assets/images/loginback/44707eaba30e5e3300dd5ab47364751d.jpg') no-repeat;
          transform: translateX(180px);
          opacity:0;
        }
        25% {
          background: url('../../assets/images/loginback/b076e63eb7b46abdd66cfe10dd67cb2d.jpg') no-repeat;
          transform: translateX(-180px);
          opacity:0.5;
        }
        50% {
          background: url('../../assets/images/loginback/63ba088e15a66b870e45ac5d674d0afa.jpg') no-repeat;
          transform: translateX(-180px);
        }
        100% {
          background: url('../../assets/images/loginback/d762a02a49f25dca82bd6909b6afca75.jpg') no-repeat;
          transform: translateX(180px);
          opacity:1;
        }
      }
    }
    .login{
      position: fixed;
      top: 30%;
      left: 40%;
      width: 250px;
      height: 150px;
      z-index: 10;
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 2px;
      .form-group{
        text-align: center;
        font-family: Helvetica;
        font-size: 14px;
        input{
          margin-bottom: 20px;
          height: 24px;
          border: 0;
          background-color: #fff;
        }
        padding: 10px;
        box-sizing: border-box;
        .subbutten{
          //display: none;
          // text-align: center;
        }
      }
    }
  }
}
</style>
